import '../css/waterOverviewCard.less'
import {CCard} from '@/components/card'
import {IconImg} from '@/components/image'
import {CnMediumP, CnNormalP, CnNormalSpan} from '@/components/text'
import WaterTarget from '@/components/waterTarget'
import CEcharts from '@/components/echarts'
import RollerDigital from '@/components/rollerDigital'
import {coustomEchartTooltip} from '@/libs/toolkit'
import {ECOption} from '@/libs/global/echarts'
import {uSelectWebMoreDevDataPandect} from '@/api/dataOverview'
import {getUserId} from '@/libs/auth'
import useLoading from '@/hooks/loading'
import {paramStatus2Color} from '@/libs/text2Color'
import {colorLuminance} from '@/libs/neumorphism'

const WaterOverviewCardLayout = defineComponent({
  props: {
    loading: Boolean
  },
  setup(props, {slots}) {
    return () => (
      <CCard
        id='CBC-WaterOverviewCard'
        title='水质总览'
        class='col-span-2 bg-white rounded-4 h-500'
        loading={props.loading}
        skeletonProps={{paragraph: {rows: 10}}}
      >
        <div class='w-full h-full flex flex-col'>{slots.default?.()}</div>
      </CCard>
    )
  }
})

export const WaterOverviewCard = defineComponent({
  setup(props) {
    const {startLoading, closeLoading, loading, isSuccess} = useLoading()

    const state = reactive<{
      overView: DataOverview.OverView | null
    }>({
      overView: null
    })

    const xAxisData = computed(() => {
      return state.overView?.userDevRunStatusList.map(item => item.createDate)
    })

    const seriesData = computed(() => {
      return (
        state.overView?.userDevRunStatusList.map(item => ({
          result: item.devRunStatusName,
          value: item.devRunStatusRatio
        })) || []
      )
    })

    const option = computed<ECOption>(() => ({
      tooltip: {
        trigger: 'axis',
        className: 'tooltipBox',
        formatter: (params: any) =>
          coustomEchartTooltip(params, {contentLeftText: params[0].data.result || '---'})
      },
      grid: {
        left: 0,
        right: 0,
        top: '4%',
        bottom: 10
      },
      xAxis: {
        type: 'category',
        data: xAxisData.value,
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#F5F6F9'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#E5E8EF'
          }
        }
      },
      animation: true,
      animationDuration: 3000,
      series: [
        {
          zlevel: 0,
          z: 0,
          data: seriesData.value,
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbolSize: 12,
          lineStyle: {
            width: 4,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#1758F0' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#04c1d6' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#326FFF1A' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#1180FF00' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }))

    function getOverview() {
      const userId = getUserId()
      if (!userId) return
      startLoading()
      uSelectWebMoreDevDataPandect({userId})
        .then(res => {
          state.overView = res.data
          closeLoading(true)
        })
        .catch(err => {
          closeLoading(false)
        })
    }

    onMounted(() => {
      startLoading()
      getOverview()
    })

    return () =>
      loading.value ? (
        <WaterOverviewCardLoading></WaterOverviewCardLoading>
      ) : isSuccess.value ? (
        <WaterOverviewCardLayout>
          <div class='w-full h-122 mt-20 flex'>
            <WaterTarget
              class='mr-24'
              id='waterTarget'
              borderColor={[
                paramStatus2Color(state.overView?.checkResult),
                colorLuminance(paramStatus2Color(state.overView?.checkResult), 0.1)
              ]}
              range={((state.overView?.nowStandRatio || 0) / 100) * 360}
            >
              <RollerDigital
                class='text-36'
                style={{
                  color: paramStatus2Color(state.overView?.checkResult)
                }}
                endVal={state.overView?.nowStandRatio}
              ></RollerDigital>
            </WaterTarget>
            <div class='flex-1 h-full'>
              <CnMediumP
                class='text-32 mt-5'
                style={{
                  color: paramStatus2Color(state.overView?.checkResult)
                }}
              >
                {state.overView?.checkResult || ''}
              </CnMediumP>
              <CnNormalP>
                当前设备
                <RollerDigital
                  class='text-20 mx-6 text-text'
                  endVal={state.overView?.devCount}
                ></RollerDigital>
                台
              </CnNormalP>
              <CnNormalP>
                <CnNormalSpan class='mr-24'>
                  累计检测
                  <RollerDigital
                    class='text-20 mx-6 text-text'
                    endVal={state.overView?.totalCheckCount}
                  ></RollerDigital>
                  次
                </CnNormalSpan>
                <CnNormalSpan>
                  正常检测
                  <RollerDigital
                    class='text-20 mx-6 text-text'
                    endVal={state.overView?.totalNormalCheckCount}
                  ></RollerDigital>
                  次
                </CnNormalSpan>
              </CnNormalP>
            </div>
          </div>
          <div class='w-full mt-20 flex flex-col flex-1'>
            <div class='flex items-center w-full'>
              <IconImg class='mr-6' imgName='waterAnalyze'></IconImg>
              <CnNormalSpan>水质评分趋势图</CnNormalSpan>
            </div>
            <div class='mt-25 flex-1 px-7'>
              <CEcharts
                id='waterAnalyze-lineEchart'
                width={'100%'}
                height={'100%'}
                option={option.value}
              ></CEcharts>
            </div>
          </div>
        </WaterOverviewCardLayout>
      ) : (
        <WaterOverviewCardEmpty></WaterOverviewCardEmpty>
      )
  }
})

export const WaterOverviewCardEmpty = defineComponent({
  setup() {
    return () => (
      <WaterOverviewCardLayout>
        <div class='w-full h-full flex items-center justify-center'>
          <a-empty description='数据获取失败' />
        </div>
      </WaterOverviewCardLayout>
    )
  }
})

export const WaterOverviewCardLoading = defineComponent({
  setup() {
    return () => <WaterOverviewCardLayout loading={true}></WaterOverviewCardLayout>
  }
})
